<script setup>
import { useMainStore } from "@/composables/store/index.ts";
import useUtils from "@/composables/useUtils.ts";
import useMouse from "@/composables/useMouse.ts";
import { onMounted, onBeforeUnmount } from "vue";

const mainStore = useMainStore();
const { sayHello } = useUtils();

const bgUrl = ref("");
const imgTimeout = ref(null);

const reload = () => {
  bgUrl.value = "/image/bg.webp";
}

// 图片加载完成
const imgLoadComplete = () => {
  imgTimeout.value = setTimeout(() => {
    useMouse();
    mainStore.setImgLoadStatus(true);
  },
    Math.floor(Math.random() * (600 - 300 +1) + 300)
  )
};
// 图片动画完成
const imgAnimationEnd = () => {
  console.log("壁纸加载且动画完成");
  sayHello();
}
// 图片显示失败
const imgLoadError = () => {
  console.log("壁纸加载失败：", bgUrl.value);
}
onMounted(() => {
  reload();
})
onBeforeUnmount(() => {
  if (imgTimeout.value) clearTimeout(imgTimeout.value);
});
</script>

<template>
  <!-- 大背景组件 -->
  <div>我是大背景</div>
</template>

<style scoped lang="scss" src="./index.scss"></style>
